<script setup lang="ts">
import { reactive, shallowRef } from 'vue';
import VideoPlay from 'vue3-video-play';
import 'vue3-video-play/dist/style.css';

const props = defineProps({
  src: {
    type: String,
    required: true,
  },
  width: String,
  height: String,
  poster: String,
});

const playerRef = shallowRef();
const options = reactive({
  color: 'var(--el-color-primary)', // 主题色
  muted: false, // 静音
  webFullScreen: false,
  speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], // 播放倍速
  autoPlay: true, // 自动播放
  loop: false, // 循环播放
  mirror: false, // 镜像画面
  ligthOff: false, // 关灯模式
  volume: 0.3, // 默认音量大小
  control: true, // 是否显示控制器
  title: '', // 视频名称
  poster: '', // 封面
  ...props,
});

const play = () => {
  playerRef.value.play();
};

const pause = () => {
  playerRef.value.pause();
};

const onPlay = (event: any) => {
  console.log(event, '播放');
};
const onPause = (event: any) => {
  console.log(event, '暂停');
};

const onTimeupdate = (event: any) => {
  console.log(event, '时间更新');
};
const onCanplay = (event: any) => {
  console.log(event, '可以播放');
};

defineExpose({
  play,
  pause,
});
</script>

<template>
  <div>
    <VideoPlay
      ref="playerRef"
      v-bind="options"
      :src="src"
      @play="onPlay"
      @pause="onPause"
      @timeupdate="onTimeupdate"
      @canplay="onCanplay"
    />
  </div>
</template>
